class FacetFiltersForm extends HTMLElement{constructor(){super(),this.onActiveFilterClick=this.onActiveFilterClick.bind(this),this.debouncedOnSubmit=debounce(event=>{this.onSubmitHandler(event)},500),this.querySelector("form").addEventListener("input",this.debouncedOnSubmit.bind(this))}connectedCallback(){window.addEventListener("scroll",()=>{const topOffset=this.getBoundingClientRect().top;this.classList.toggle("is-sticky",topOffset<0)})}static setListeners(){const onHistoryChange=event=>{const searchParams=event.state?event.state.searchParams:FacetFiltersForm.searchParamsInitial;searchParams!==FacetFiltersForm.searchParamsPrev&&FacetFiltersForm.renderPage(searchParams,null,!1)};window.addEventListener("popstate",onHistoryChange)}static renderPage(searchParams,event,updateURLHash=!0){FacetFiltersForm.searchParamsPrev=searchParams,FacetFiltersForm.getSections().forEach(section=>{const url=`${window.location.pathname}?section_id=${section.section}&${searchParams}`,filterDataUrl=element=>element.url===url;FacetFiltersForm.filterData.some(filterDataUrl)?FacetFiltersForm.renderSectionFromCache(filterDataUrl,event):FacetFiltersForm.renderSectionFromFetch(url,event),updateURLHash&&FacetFiltersForm.updateURLHash(searchParams)})}static renderSectionFromFetch(url,event){fetch(url).then(response=>response.text()).then(responseText=>{const html=responseText;FacetFiltersForm.filterData=[...FacetFiltersForm.filterData,{html,url}],FacetFiltersForm.renderFilters(html,event),FacetFiltersForm.renderProductGridContainer(html),FacetFiltersForm.renderProductCount(html)})}static renderSectionFromCache(filterDataUrl,event){const html=FacetFiltersForm.filterData.find(filterDataUrl).html;FacetFiltersForm.renderFilters(html,event),FacetFiltersForm.renderProductGridContainer(html),FacetFiltersForm.renderProductCount(html)}static renderProductGridContainer(html){document.getElementById("ProductGridContainer").innerHTML=new DOMParser().parseFromString(html,"text/html").getElementById("ProductGridContainer").innerHTML,document.getElementById("ProductGridPagination").innerHTML=new DOMParser().parseFromString(html,"text/html").getElementById("ProductGridPagination").innerHTML}static renderProductCount(html){const count=new DOMParser().parseFromString(html,"text/html").getElementById("ProductCount"),container=document.getElementById("ProductCount");container&&(container.innerHTML=count?count.innerHTML:"")}static renderFilters(html,event){const parsedHTML=new DOMParser().parseFromString(html,"text/html"),facetDetailsElements=parsedHTML.querySelectorAll("#FacetFiltersForm .js-filter"),matchesIndex=element=>{const jsFilter=event?event.target.closest(".js-filter"):void 0;return jsFilter?element.dataset.index===jsFilter.dataset.index:!1},facetsToRender=Array.from(facetDetailsElements).filter(element=>!matchesIndex(element)),countsToRender=Array.from(facetDetailsElements).find(matchesIndex);facetsToRender.forEach(element=>{const elem=document.querySelector(`.js-filter[data-index="${element.dataset.index}"]`);elem&&(elem.innerHTML=element.innerHTML)}),FacetFiltersForm.renderActiveFacets(parsedHTML),countsToRender&&FacetFiltersForm.renderCounts(countsToRender,event.target.closest(".js-filter"))}static renderActiveFacets(html){[".js-facets-active",".js-facets-remove-all"].forEach(element=>{const htmlElement=html.querySelector(element),hostElement=document.querySelector(element);!htmlElement||!hostElement||(hostElement.outerHTML=htmlElement.outerHTML)})}static renderCounts(source,target){const selector=".js-facets-selected",targetElement=target.querySelector(selector);source.querySelector(selector)&&targetElement&&(target.querySelector(selector).outerHTML=source.querySelector(selector).outerHTML)}static updateURLHash(searchParams){history.pushState({searchParams},"",`${window.location.pathname}${searchParams&&"?".concat(searchParams)}`)}static getSections(){return[{section:document.querySelector("facet-filters-form").dataset.sectionId}]}onSubmitHandler(event){event.preventDefault();const context=event.target.id.includes("desktop")?"mobile":"desktop",formData=new FormData,formDataElements=Array.from(event.target.closest("form").elements).filter(element=>!element.id.includes(context)||element.name==="sort_by");for(const element of formDataElements)element.name&&(element.type==="checkbox"?element.checked&&formData.append(element.name,element.value):formData.append(element.name,element.value));const searchParams=new URLSearchParams(formData).toString();FacetFiltersForm.renderPage(searchParams,event)}onActiveFilterClick(event){event.preventDefault();const url=event.currentTarget.href.indexOf("?")==-1?"":event.currentTarget.href.slice(event.currentTarget.href.indexOf("?")+1);FacetFiltersForm.renderPage(url)}}FacetFiltersForm.filterData=[],FacetFiltersForm.searchParamsInitial=window.location.search.slice(1),FacetFiltersForm.searchParamsPrev=window.location.search.slice(1),customElements.define("facet-filters-form",FacetFiltersForm),FacetFiltersForm.setListeners();class PriceRange extends HTMLElement{constructor(){super(),this.inputs=this.querySelectorAll("input"),this.inputs.forEach(element=>element.addEventListener("change",this.onRangeChange.bind(this))),this.setMinAndMaxValues()}onRangeChange(event){this.adjustToValidValues(event.currentTarget),this.setMinAndMaxValues()}setMinAndMaxValues(){const minInput=this.inputs[0],maxInput=this.inputs[1];maxInput.value&&minInput.setAttribute("max",maxInput.value),minInput.value&&maxInput.setAttribute("min",minInput.value),minInput.value===""&&maxInput.setAttribute("min",0),maxInput.value===""&&minInput.setAttribute("max",maxInput.getAttribute("max"))}adjustToValidValues(input){const value=Number(input.value),min=Number(input.getAttribute("min")),max=Number(input.getAttribute("max"));value<min&&(input.value=min),value>max&&(input.value=max)}}customElements.define("price-range",PriceRange);class FacetRemove extends HTMLElement{constructor(){super(),this.querySelector("a").addEventListener("click",event=>{event.preventDefault(),(this.closest("facet-filters-form")||document.querySelector("facet-filters-form")).onActiveFilterClick(event)})}}customElements.define("facet-remove",FacetRemove);
//# sourceMappingURL=/cdn/shop/t/13/assets/facets.js.map?v=167153730493922532751732799821